<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
  <h1>用户权限</h1>
  <div v-if="isguanli">
    <input type="text" v-model="name" placeholder="发帖内容">
    <input type="button" value="发表" @click="add()">
    <a href="javascript:void (0)" @click="glout()">非管理员</a>
  </div>
  <div v-else>
  <a href="">查看</a>
    <a href="javascript:void(0)" @click="guanli()">我是管理员</a>
  </div>
  <table border="1">
    <caption>用户列表</caption>
    <tr>
      <th>编号</th><th>帖子</th><th v-if="isguanli">操作</th>
    </tr>
    <tr v-for="(name,i) in arr">
      <td>{{i+1}}</td>
      <td>{{name}}</td>
      <td  v-if="isguanli"><a href="javascript:void(0)" @click="del(i)">删除</a></td>
    </tr>
  </table>

</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
  let v = new Vue({
  el:"body>div",
  data:{
    isguanli:false,
    arr:["帖子一","帖子二","帖子三"],
    name:""
  },
    methods:{
    del(i){
      v.arr.splice(i,1);
    },
     add(){
      v.arr.push(v.name);
     },
     guanli(){
      v.isguanli = true;
     },
     glout(){
      v.isguanli = false;
     }
    }
  })
</script>
</body>
</html>













